<template>
    <t-space align="center">
        <t-button theme="primary" @click="visible = true">AI助手悬窗展示</t-button>
    </t-space>

    <!-- 聊天主体 -->
    <t-chat layout="both" :clear-history="chatList.length > 0">
        <!-- 消息列表 -->
        <t-chat-item v-for="(item, index) in chatList" :key="index" :role="item.role"
            :text-loading="index === 0 && loading" :content="item.content" :variant="getStyle(item.role)">
        </t-chat-item>

        <!-- 输入区域 -->
        <template #footer>
            <t-chat-sender v-model="inputValue" :loading="loading" :textarea-props="{ placeholder: '说点什么吧～嘻嘻' }"
                @send="handleSend" />
        </template>
    </t-chat>
</template>

<script setup>
import { ref } from 'vue';

// 控制抽屉显示
const visible = ref(false);

// 输入内容
const inputValue = ref('');

// 聊天列表
const chatList = ref([
    {
        role: 'assistant',
        content: '您好！我是客服小T，有什么可以帮助您吗？嘻嘻～',
    },
]);

// 加载状态
const loading = ref(false);

// 获取消息样式
const getStyle = (role) => {
    return role === 'assistant' ? 'outline' : 'base';
};

// 模拟后端回复（替代真实接口）
const mockApiReply = (userInput) => {
    // 模拟延迟
    setTimeout(() => {
        let reply = '嘻嘻，让我想想～';

        if (userInput.includes('你好')) {
            reply = '你好呀！今天也要元气满满哦～嘻嘻！';
        } else if (userInput.includes('问题')) {
            reply = '别担心，小T来帮你解决！嘻嘻～';
        } else if (userInput.includes('退款')) {
            reply = '支持7天无理由退款哦，记得保留凭证～嘻嘻！';
        } else if (userInput.includes('可爱')) {
            reply = '那当然啦，我可是全宇宙最可爱的AI客服！嘻嘻～';
        } else if (userInput.includes('拜拜')) {
            reply = '拜拜啦～有需要随时找我哦！嘻嘻～';
        } else {
            reply = [
                '嘻嘻，我收到啦～',
                '感谢提问！我会继续努力的！',
                '这个问题我懂！正在为您查询...',
                '您也可以拨打人工客服：400-123-4567'
            ][Math.floor(Math.random() * 4)];
        }

        // 添加客服回复
        chatList.value.unshift({
            role: 'assistant',
            content: reply,
        });

        loading.value = false;
    }, 800);
};

// 发送消息
const handleSend = () => {
    if (!inputValue.value.trim() || loading.value) return;

    // 添加用户消息
    chatList.value.unshift({
        role: 'user',
        content: inputValue.value,
    });

    // 开始加载
    loading.value = true;

    // 调用模拟接口
    mockApiReply(inputValue.value);

    // 清空输入框
    inputValue.value = '';
};
</script>

<style lang="less">
.title {
    margin-left: 16px;
    font-size: 20px;
    color: var(--td-text-color-primary);
    font-weight: 600;
    line-height: 28px;
}

.drawer-box {
    .t-drawer__header {
        padding: 32px;
    }

    .t-drawer__body {
        padding: 0px 32px 30px 32px;
    }

    .t-drawer__close-btn {
        right: 32px;
        top: 32px;
        background-color: var(--td-bg-color-secondarycontainer);
        width: 32px;
        height: 12px;
        border-radius: 50%;

        .t-icon {
            font-size: 20px;
        }
    }
}
</style>